<template>
  <view>
    <topBackGround :backisShow="0" :banner="1"></topBackGround>
    <view class="title">第一步：注册登录</view>
    <view class="container">
      <text class="title_tips">点击下方按钮注册或者登录</text>
      <button open-type="getPhoneNumber" @getphonenumber="toLogin" class="main_btn">注册并登录</button>
    </view>
  </view>
</template>

<script setup>
import topBackGround from '../../../src/components/backGround.vue'
import config from '../../network/baseUrl'
import { ref,reactive } from 'vue'
import Taro from '@tarojs/taro'
import requset from '../../network/request'
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
instance.appContext.config.globalProperties.$loadFontFace()

const userToken = Taro.getStorageSync('token');
console.log('indexpage - userToken:(', userToken, ')')
if (userToken) {
  Taro.switchTab({
    url: '/pages/offering/index'
  })
}

let phoneCode = ''

function toLogin(e) {
  let detail = e.detail
  console.log(detail);
  if(detail.errMsg === "getPhoneNumber:ok") {
    console.log("用户同意授权", );
    console.log(detail.code,"手机号code");
    phoneCode = detail.code
  }

  Taro.showLoading({title: '登录中...', mask:true})
  Taro.login({
    success(res){
      console.log('Taro.login:', res)
      const code = res.code

      console.log( '给login发code:', code )
      // 登录
      requset('/mini-program/user/login', {
        method:'post',
        data: {
          code:  code
        }
      }).then(res => {
        console.log('login:',res)
        Taro.hideLoading()
        console.log('login',res.data )

        if (res.code === 404) {
          // 获取phoneCode
          // phoneCode = res.data.phoneCode || phoneCode

          const openId = res.data.openid
          const sessionKey = res.data.session_key

          console.log( '给regist发openId:', openId )
          console.log( '给regist发sessionKey:', sessionKey )
          console.log( '给regist发phoneCode:', phoneCode )
          //注册
          requset('/mini-program/user/regist',{
            method:'post',
            header: {
              sessionKey: sessionKey
            },
            data: {
              code: phoneCode, // LoginCode,
              openid: openId,
              unionid: ''
            }
          }).then(res => {
            console.log('regist:',res)
            const token = res.data.userToken
            const userId = res.data.userId
            const phone = res.data.phone
            console.log('token:', token);
            console.log('userId:', userId);
            console.log('phone:', phone);
            Taro.setStorage({
              key:"token",
              data: token
            })
            Taro.setStorage({
              key:"userId",
              data: userId
            })
            Taro.setStorage({
              key:"phone",
              data: phone
            })
            Taro.switchTab({
              url: '/pages/offering/index'
            })
          })
        } else if( res.code === 200 ) {
          const token = res.data.userToken
          const userId = res.data.userId
          const phone = res.data.phone
          Taro.setStorage({
            key:"token",
            data: token
          })
          Taro.setStorage({
              key:"userId",
              data: userId
          })
          Taro.setStorage({
            key:"phone",
            data: phone
          })

          console.log('res.code === 200 时存token：', res.data.userToken)
          Taro.switchTab({
            url: '/pages/offering/index'
          })
        } 
      })
    }
  })
}

</script>
<style>

.container {
  width: 100%;
  position: absolute;
  top: 290px;
  bottom: 0;
  background: #F7F3E8 url('../../images/znsb_bg.png') no-repeat center 80% ;
  background-color: #F7F3E8;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 0;
}

.title{
  width: 480px;
  height: 152px;
  line-height: 152px;
  font-size: 40px;
  text-align: center;
  color: #181410;
  background: url('../../images/scroll.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 224px;
  left: 136px;
  z-index: 10;
}

.title_tips {
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #816747;
  margin-top: 180px;
  display: inline-block;
}

.main_btn {
  width: 588px;
  height: 112px;
  line-height: 112px;
  font-size: 30px;
  color: #FFF;
  text-align: center;
  background-color: #956F31;
  display: block;
  margin: 0 auto;
  border-radius: 100px;
  margin-top: 50px;
}

</style>

<!-- 1.通过  wx.login()  获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserProfile(之前是getUserInfo) 读取用户数据。
2.由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息。
3.通过 wx.request() 方法请求业务方服务器，后端把 appid , appsecret  和 code 一起发送到微信服务器。appid 和 appsecret 都是微信提供的，可以在管理员后台找到。
4.微信服务器返回了 openid 及本次登录的会话密钥 session_key。
5.后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走。
6.session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。
7.然后生成 session并返回给小程序。
8.小程序把 session 存到  storage 里面。
9.下次请求时，先从 storage 里面读取，然后带给服务端。
10.服务端对比 session 对应的记录，然后校验有效期。 -->
